<template>
  <div class="designer-selection-container">
    <div class="page-header">
      <h2>设计师选择</h2>
      <p>选择专业设计师为您提供上门服务，你可以根据设计师的专长和评价进行选择</p>
    </div>
    
    <el-card class="main-card">
      <!-- 筛选条件 -->
      <div class="filter-container">
        <el-card class="filter-card" shadow="never">
          <div class="filter-title">筛选设计师</div>
          <el-form :model="filterForm" label-width="80px" size="default">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="专长领域">
                  <el-select v-model="filterForm.specialty" placeholder="选择专长领域" style="width: 100%">
                    <el-option label="全部" value="" />
                    <el-option label="西装定制" value="suit" />
                    <el-option label="工装定制" value="workwear" />
                    <el-option label="休闲装定制" value="casual" />
                    <el-option label="民族服装" value="ethnic" />
                    <el-option label="时装设计" value="fashion" />
                  </el-select>
                </el-form-item>
              </el-col>
              
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="经验等级">
                  <el-select v-model="filterForm.level" placeholder="选择经验等级" style="width: 100%">
                    <el-option label="全部" value="" />
                    <el-option label="初级设计师" value="junior" />
                    <el-option label="中级设计师" value="intermediate" />
                    <el-option label="高级设计师" value="senior" />
                    <el-option label="首席设计师" value="chief" />
                  </el-select>
                </el-form-item>
              </el-col>
              
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="评分">
                  <el-select v-model="filterForm.rating" placeholder="选择最低评分" style="width: 100%">
                    <el-option label="全部" value="" />
                    <el-option label="4星以上" value="4" />
                    <el-option label="4.5星以上" value="4.5" />
                    <el-option label="4.8星以上" value="4.8" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="24">
                <div class="filter-actions">
                  <el-button type="primary" @click="applyFilters">应用筛选</el-button>
                  <el-button @click="resetFilters">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      
      <!-- 设计师列表 -->
      <div class="designer-list" v-loading="loading">
        <el-empty v-if="filteredDesigners.length === 0" description="没有找到符合条件的设计师"></el-empty>
        
        <div class="designer-grid">
          <el-card 
            v-for="designer in filteredDesigners" 
            :key="designer.id" 
            class="designer-card"
            :class="{ 'selected': selectedDesigner.id === designer.id }"
            @click="viewDesignerDetail(designer)"
          >
            <div class="designer-card-content">
              <div class="designer-avatar">
                <el-avatar :size="80" :src="designer.avatar"></el-avatar>
                <el-tag 
                  :type="getLevelTagType(designer.level)" 
                  class="level-tag">{{ designer.levelName }}</el-tag>
              </div>
              
              <div class="designer-info">
                <h3 class="designer-name">{{ designer.name }}</h3>
                
                <div class="designer-rating">
                  <el-rate
                    v-model="designer.rating"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  ></el-rate>
                </div>
                
                <div class="designer-specialty">
                  <span>专长：</span>
                  <el-tag
                    v-for="(tag, index) in designer.specialtyTags"
                    :key="index"
                    size="small"
                    effect="plain"
                    style="margin-right: 5px"
                  >{{ tag }}</el-tag>
                </div>
                
                <div class="designer-experience">
                  <span>从业经验：{{ designer.experience }}年</span>
                </div>
                
                <div class="designer-orders">
                  <span>已完成订单：{{ designer.completedOrders }}单</span>
                </div>
              </div>
            </div>
            
            <div class="designer-actions">
              <el-button type="primary" @click.stop="selectDesigner(designer)">选择此设计师</el-button>
              <el-button type="info" @click.stop="viewDesignerDetail(designer)">查看详情</el-button>
            </div>
          </el-card>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[8, 16, 24, 32]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalDesigners"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    
    <!-- 设计师详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="设计师详情" width="650px">
      <div class="designer-detail" v-if="currentDesigner.id">
        <div class="designer-detail-header">
          <div class="designer-detail-avatar">
            <el-avatar :size="100" :src="currentDesigner.avatar"></el-avatar>
          </div>
          
          <div class="designer-detail-info">
            <h2>{{ currentDesigner.name }} 
              <el-tag :type="getLevelTagType(currentDesigner.level)">{{ currentDesigner.levelName }}</el-tag>
            </h2>
            
            <div class="designer-detail-rating">
              <el-rate
                v-model="currentDesigner.rating"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
              <span class="rating-count">({{ currentDesigner.ratingCount }}条评价)</span>
            </div>
            
            <div class="designer-detail-specialty">
              <span>专长领域：</span>
              <el-tag
                v-for="(tag, index) in currentDesigner.specialtyTags"
                :key="index"
                effect="plain"
                style="margin-right: 5px"
              >{{ tag }}</el-tag>
            </div>
            
            <div class="designer-detail-experience">
              <span>从业经验：{{ currentDesigner.experience }}年</span>
              <span style="margin-left: 15px">完成订单：{{ currentDesigner.completedOrders }}单</span>
            </div>
          </div>
        </div>
        
        <el-divider />
        
        <div class="designer-detail-body">
          <h4>设计师简介</h4>
          <p>{{ currentDesigner.bio }}</p>
          
          <h4>擅长风格</h4>
          <div class="designer-styles">
            <el-tag
              v-for="(style, index) in currentDesigner.styles"
              :key="index"
              style="margin-right: 8px; margin-bottom: 8px"
            >{{ style }}</el-tag>
          </div>
          
          <h4>作品展示</h4>
          <div class="designer-works">
            <el-image
              v-for="(work, index) in currentDesigner.works"
              :key="index"
              :src="work"
              fit="cover"
              style="width: 120px; height: 120px; margin-right: 10px; margin-bottom: 10px"
              :preview-src-list="currentDesigner.works"
              :initial-index="index"
            />
          </div>
          
          <h4>客户评价</h4>
          <div class="designer-reviews">
            <div v-if="currentDesigner.reviews && currentDesigner.reviews.length > 0">
              <div 
                v-for="(review, index) in currentDesigner.reviews" 
                :key="index"
                class="review-item"
              >
                <div class="review-header">
                  <div class="review-user">
                    <el-avatar :size="36" :src="review.avatar"></el-avatar>
                    <span class="review-username">{{ review.username }}</span>
                  </div>
                  <div class="review-rating">
                    <el-rate :value="review.rating" disabled text-color="#ff9900" size="small"></el-rate>
                    <span class="review-date">{{ review.date }}</span>
                  </div>
                </div>
                <div class="review-content">{{ review.content }}</div>
              </div>
            </div>
            <el-empty v-else description="暂无评价"></el-empty>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="selectDesigner(currentDesigner)">选择此设计师</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 预约确认对话框 -->
    <el-dialog v-model="confirmDialogVisible" title="预约确认" width="450px">
      <div class="confirm-content" v-if="selectedDesigner.id">
        <p>您已选择由 <strong>{{ selectedDesigner.name }}</strong> 为您提供上门服务</p>
        
        <div class="confirm-designer-info">
          <el-avatar :size="60" :src="selectedDesigner.avatar"></el-avatar>
          <div class="confirm-designer-detail">
            <div>{{ selectedDesigner.levelName }}</div>
            <div class="confirm-designer-rating">
              <el-rate :value="selectedDesigner.rating" disabled text-color="#ff9900" size="small"></el-rate>
              <span>{{ selectedDesigner.rating }}分</span>
            </div>
            <div>从业经验：{{ selectedDesigner.experience }}年</div>
          </div>
        </div>
        
        <div class="confirm-notice">
          <el-alert
            title="设计师确认说明"
            type="info"
            :closable="false"
            show-icon
          >
            <p>1. 选择设计师后，系统将自动向设计师发送预约请求</p>
            <p>2. 设计师将在24小时内确认是否接受预约</p>
            <p>3. 您可以在预约管理中查看预约状态</p>
          </el-alert>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAppointment">确认预约</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 预约成功对话框 -->
    <el-dialog v-model="successDialogVisible" title="预约成功" width="400px">
      <div class="success-content">
        <el-result
          icon="success"
          title="设计师预约成功"
          sub-title="您的预约请求已发送给设计师，请等待确认"
        >
          <template #extra>
            <el-button type="primary" @click="goToAppointmentList">查看我的预约</el-button>
          </template>
        </el-result>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'DesignerSelection',
  setup() {
    const router = useRouter()
    
    // 加载状态
    const loading = ref(false)
    
    // 筛选表单
    const filterForm = reactive({
      specialty: '',
      level: '',
      rating: ''
    })
    
    // 分页
    const pagination = reactive({
      currentPage: 1,
      pageSize: 8
    })
    
    // 设计师列表
    const designerList = ref([])
    const totalDesigners = ref(0)
    
    // 筛选结果
    const filteredDesigners = computed(() => {
      return designerList.value.slice(
        (pagination.currentPage - 1) * pagination.pageSize,
        pagination.currentPage * pagination.pageSize
      )
    })
    
    // 选中的设计师
    const selectedDesigner = ref({})
    const currentDesigner = ref({})
    
    // 对话框状态
    const detailDialogVisible = ref(false)
    const confirmDialogVisible = ref(false)
    const successDialogVisible = ref(false)
    
    // 获取级别标签类型
    const getLevelTagType = (level) => {
      const typeMap = {
        'junior': 'info',
        'intermediate': 'success',
        'senior': 'warning',
        'chief': 'danger'
      }
      return typeMap[level] || 'info'
    }
    
    // 获取设计师列表
    const getDesignerList = async () => {
      loading.value = true
      
      try {
        // 在实际项目中应该调用API获取数据
        // 这里使用模拟数据
        // 生成模拟数据的函数
        const generateDesigners = () => {
          const designers = []
          const levels = [
            { value: 'junior', name: '初级设计师' },
            { value: 'intermediate', name: '中级设计师' },
            { value: 'senior', name: '高级设计师' },
            { value: 'chief', name: '首席设计师' }
          ]
          
          const specialties = [
            ['西装定制', '正装'],
            ['工装定制', '职业装'],
            ['休闲装定制', '时尚休闲'],
            ['民族服装', '传统服饰'],
            ['时装设计', '潮流时尚']
          ]
          
          const styles = [
            '简约风格', '复古风格', '现代商务', '休闲时尚', 
            '欧美风格', '日韩风格', '中国风', '运动风格',
            '优雅格调', '街头潮流'
          ]
          
          const works = [
            'https://picsum.photos/id/20/200/200',
            'https://picsum.photos/id/21/200/200',
            'https://picsum.photos/id/22/200/200',
            'https://picsum.photos/id/23/200/200',
            'https://picsum.photos/id/24/200/200',
            'https://picsum.photos/id/25/200/200'
          ]
          
          const reviews = [
            {
              username: '张先生',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
              rating: 5.0,
              date: '2023-03-15',
              content: '设计师非常专业，对我的需求理解透彻，提供的定制方案非常满意，服务态度也很好。'
            },
            {
              username: '李女士',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
              rating: 4.8,
              date: '2023-02-28',
              content: '很棒的设计师，有丰富的经验，能够给出很多专业的建议，最终的成品效果超出预期。'
            },
            {
              username: '王经理',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
              rating: 4.9,
              date: '2023-01-10',
              content: '为公司团队定制了工作服，设计师从选材到版型都给了很多专业意见，团队都很满意。'
            }
          ]
          
          // 生成20个设计师
          for (let i = 1; i <= 20; i++) {
            const levelIndex = Math.floor(Math.random() * levels.length)
            const level = levels[levelIndex]
            
            const specialtyIndex = Math.floor(Math.random() * specialties.length)
            const specialtyTags = specialties[specialtyIndex]
            
            // 随机选择3-5个样式
            const randomStyles = []
            const styleCount = Math.floor(Math.random() * 3) + 3 // 3到5个
            
            while (randomStyles.length < styleCount) {
              const style = styles[Math.floor(Math.random() * styles.length)]
              if (!randomStyles.includes(style)) {
                randomStyles.push(style)
              }
            }
            
            // 随机选择3-5个作品
            const randomWorks = []
            const workCount = Math.floor(Math.random() * 3) + 3 // 3到5个
            
            while (randomWorks.length < workCount) {
              const work = works[Math.floor(Math.random() * works.length)]
              if (!randomWorks.includes(work)) {
                randomWorks.push(work)
              }
            }
            
            // 随机选择0-3个评价
            const randomReviews = []
            const reviewCount = Math.floor(Math.random() * 4) // 0到3个
            
            for (let j = 0; j < reviewCount && j < reviews.length; j++) {
              randomReviews.push(reviews[j])
            }
            
            designers.push({
              id: i,
              name: `设计师${i}`,
              avatar: `https://cube.elemecdn.com/${Math.floor(Math.random() * 10)}/88/03b0d39583f48206768a7534e55bcpng.png`,
              level: level.value,
              levelName: level.name,
              rating: (4 + Math.random()).toFixed(1),
              ratingCount: Math.floor(Math.random() * 200) + 10,
              specialty: specialties[specialtyIndex][0],
              specialtyTags,
              experience: Math.floor(Math.random() * 10) + 1,
              completedOrders: Math.floor(Math.random() * 200) + 20,
              bio: `${level.name}，专注于${specialtyTags.join('、')}领域，拥有${Math.floor(Math.random() * 10) + 1}年从业经验，擅长为客户提供个性化定制服务，注重细节和服务质量。`,
              styles: randomStyles,
              works: randomWorks,
              reviews: randomReviews
            })
          }
          
          return designers
        }
        
        // 生成20个设计师数据
        const designers = generateDesigners()
        
        // 应用筛选
        let filteredResults = [...designers]
        
        if (filterForm.specialty) {
          filteredResults = filteredResults.filter(d => d.specialty.includes(filterForm.specialty))
        }
        
        if (filterForm.level) {
          filteredResults = filteredResults.filter(d => d.level === filterForm.level)
        }
        
        if (filterForm.rating) {
          filteredResults = filteredResults.filter(d => parseFloat(d.rating) >= parseFloat(filterForm.rating))
        }
        
        designerList.value = filteredResults
        totalDesigners.value = filteredResults.length
      } catch (error) {
        console.error('获取设计师列表失败:', error)
        ElMessage.error('获取设计师列表失败，请重试')
      } finally {
        loading.value = false
      }
    }
    
    // 应用筛选
    const applyFilters = () => {
      pagination.currentPage = 1
      getDesignerList()
    }
    
    // 重置筛选
    const resetFilters = () => {
      Object.keys(filterForm).forEach(key => {
        filterForm[key] = ''
      })
      
      pagination.currentPage = 1
      getDesignerList()
    }
    
    // 分页处理
    const handleSizeChange = (size) => {
      pagination.pageSize = size
    }
    
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
    }
    
    // 查看设计师详情
    const viewDesignerDetail = (designer) => {
      currentDesigner.value = designer
      detailDialogVisible.value = true
    }
    
    // 选择设计师
    const selectDesigner = (designer) => {
      selectedDesigner.value = designer
      detailDialogVisible.value = false
      confirmDialogVisible.value = true
    }
    
    // 确认预约
    const confirmAppointment = () => {
      // 在实际项目中应该调用API提交预约
      ElMessage.success(`已选择 ${selectedDesigner.value.name} 为您提供服务，预约请求已发送`)
      confirmDialogVisible.value = false
      successDialogVisible.value = true
    }
    
    // 查看预约列表
    const goToAppointmentList = () => {
      // 在实际项目中应该跳转到预约列表页面
      ElMessage.info('此功能尚未实现')
      successDialogVisible.value = false
    }
    
    // 初始化
    onMounted(() => {
      getDesignerList()
    })
    
    return {
      loading,
      filterForm,
      pagination,
      designerList,
      totalDesigners,
      filteredDesigners,
      selectedDesigner,
      currentDesigner,
      detailDialogVisible,
      confirmDialogVisible,
      successDialogVisible,
      getLevelTagType,
      applyFilters,
      resetFilters,
      handleSizeChange,
      handleCurrentChange,
      viewDesignerDetail,
      selectDesigner,
      confirmAppointment,
      goToAppointmentList
    }
  }
}
</script>

<style scoped>
.designer-selection-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.main-card {
  margin-bottom: 24px;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-card {
  background-color: #f8f9fa;
}

.filter-title {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
}

.filter-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.designer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.designer-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.designer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.designer-card.selected {
  border: 2px solid #409EFF;
}

.designer-card-content {
  display: flex;
  margin-bottom: 15px;
}

.designer-avatar {
  position: relative;
  margin-right: 15px;
}

.level-tag {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  padding: 0 5px;
}

.designer-info {
  flex: 1;
}

.designer-name {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.designer-rating {
  margin-bottom: 8px;
}

.designer-specialty, .designer-experience, .designer-orders {
  margin-bottom: 5px;
  font-size: 13px;
  color: #666;
}

.designer-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.designer-detail-header {
  display: flex;
  margin-bottom: 20px;
}

.designer-detail-avatar {
  margin-right: 20px;
}

.designer-detail-info {
  flex: 1;
}

.designer-detail-info h2 {
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.designer-detail-rating, .designer-detail-specialty, .designer-detail-experience {
  margin-bottom: 10px;
}

.rating-count {
  font-size: 13px;
  color: #666;
  margin-left: 5px;
}

.designer-detail-body h4 {
  margin: 15px 0 10px 0;
  font-size: 16px;
  font-weight: 500;
}

.designer-styles, .designer-works {
  margin-bottom: 20px;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.review-user {
  display: flex;
  align-items: center;
}

.review-username {
  margin-left: 10px;
  font-weight: 500;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-date {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
}

.review-content {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

.confirm-content {
  text-align: center;
}

.confirm-designer-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.confirm-designer-detail {
  margin-left: 15px;
  text-align: left;
}

.confirm-designer-rating {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.confirm-notice {
  margin-top: 20px;
  text-align: left;
}
</style> 